{% extends 'eform_base.html' %}
{% load static %}

{% block title %}
    <title>Eform</title>
{% endblock title %}    

{% block body %}

<div class="container-fluid mt-3">
    <div class="card bg-secondary">
        <div class="card-header">
            <h1>EForm Schema</h1>
        </div>
        <div class="card-body">
            <table class="table table-hover">
                <thead>
                    <tr>
                        {% comment %} <th>Schema ID</th> {% endcomment %}
                        <th>Schema Form No.</th>
                        <th>Schema Title</th>
                        <th>Last Update</th>
                        <th>Enable</th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
           
                    
                    {% for e in eforms %}
                        <tr 
                        {% if e.pk == new %}
                            class="table-success"
                        {% endif %}
                            >
                            {% comment %} <td class="pt-4">{{e.id}}  </td> {% endcomment %}
                            <td class="pt-4">{{e.formNo}}  </td>
                            <td class="pt-4"><a href="{% url 'eform:eformSchemaView' e.id %}">{{e.title}}</a></td>
                            <td class="pt-4">{{e.updated}}</td>
                            <td class="pt-4">{{e.enable}}</td>
                            <td class="pt-3">
                                <div class="td-wrapper text-center">
                                    
                                    <!-- <a name="" id="" data-sid="{{e.pk}}" class="create-form-btn btn btn-sm btn-outline-success" href="#" role="button">Create Form</a> -->
                                    <a name="" id="" class="{% if perms.eform.change_eformschema %}{% else %}disabled {% endif %} btn btn-sm btn-outline-warning" href="{% url 'eform:schemaBuilder' e.pk %}" role="button">Edit</a>
                                    <a name="" id="" target="_blank" class="{% if perms.eform.change_eformschema %}{% else %}disabled {% endif %} btn btn-sm btn-outline-dark" href="{% url 'eform:eformPreview' e.pk %}" role="button">Preview</a>
                                    <!-- <a href="{% url 'eform:schemaBuilder' e.pk %}">Edit</a> -->
                                    <form class="d-inline" method="post" action="{% url 'eform:eformNewSchema'  %}">
                                        {% csrf_token %}
                                        <input name="" id="" class="btn btn-success btn-sm " type="submit" value="Create">
                                        <input type="hidden" name="eformSchema_id" value="{{e.id}}">
                                    </form>
                                </div>

                            </td>
                            <td class="pt-3">
                                <div class="td-wrapper">
                                    <a name="" id="" class="{% if perms.eform.delete_eformschema %}{% else %}disabled {% endif %} btn btn-sm btn-outline-danger" href="{% url 'eform:deleteSchemaBuilder' e.pk %}" role="button">Delete</a>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                        
                </tbody>
            </table>
        </div>
    </div>
</div>
    
<form class="d-inline d-none" id="createForm" method="post" action="{% url 'eform:eformNewSchema' %}">
    {% csrf_token %}
    <input type="hidden" name="eformSchema_id" id="eformSchema_id" val="">
</form>
{% endblock body %}


{% block script %}
<link rel="stylesheet" href="{% static 'eform/datatables/datatables.min.css' %}">
<script src="{% static 'eform/datatables/datatables.min.js' %}"></script>

    <script>
        $(function(){
            $('.create-form-btn').on('click',function(e){
                const schema_ID = $(this).data('sid')
                $('#eformSchema_id').val(schema_ID)
                $('#createForm').submit()
            })
            $('table').dataTable({
                pageLength:100,
                "order":[
                    [0,"asc"],
                    
                ],
                "columnDefs": [
                    {
                        // The `data` parameter refers to the data for the cell (defined by the
                        // `data` option, which defaults to the column being worked with, in
                        // this case `data: 0`.
                        "orderable": false,
                        "targets": 4,
                    },
                    {
                        // The `data` parameter refers to the data for the cell (defined by the
                        // `data` option, which defaults to the column being worked with, in
                        // this case `data: 0`.
                        "orderable": false,
                        "targets": 5,
                    }
                ],
            })
        })
    </script>
{% endblock script %}
    

    